<template>
  <Card>
    <div slot="title">
      <span style="line-height:32px; height:32px;">权限设置</span>
      <Button @click="saveMenuPermission" style="float:right">保存</Button>
    </div>
    <div class="current_row">
      <Row>
          当前角色: {{ roleName }}
      </Row>
    </div>
    <PickTree
    :data="menuList"
    :checkedMenus="roleMenus"
    :labelKey="deptTreeLabelKey"
    :valueKey="deptTreeValueKey"
    @on-check-change='onSelectDeptChange'
    />
  </Card>
</template>
<script>
import PickTree from './pick-tree'
import RoleApi from '@/api/base/role'
import MenuApi from '@/api/base/menu'

export default {
  name: 'MenuTree',
  components: {
    PickTree
  },
  props: {
    currentRole: {
      type: Object,
      default: () => {
        return {
          uuid: '',
          code: '',
          roleName: 'nobody'
        }
      }
    }
  },
  data () {
    return {
      menuList: [],
      deptTreeLabelKey: 'menuName',
      deptTreeValueKey: 'code',
      roleName: '',
      selectedMenuList: [],
      roleMenus: [] // 当前用户选中的菜单列表
    }
  },
  methods: {
    onSelectDeptChange (node) {
      this.selectedMenuList = node
    },
    // 保存菜单权限
    async saveMenuPermission () {
      if (this.selectedMenuList.length < 1) {
        this.$Notice.error({
          title: '保存错误',
          desc: '至少选中一条菜单'
        })
        return -1
      }
      if (this.currentRole.code === '') {
        this.$Notice.error({
          title: '保存错误',
          desc: '至少选中一个角色'
        })
        return -1
      }
      let menusCodes = []
      this.selectedMenuList.map(row => {
        menusCodes.push(row.value)
      })
      const ret = await RoleApi.saveMenusForRole(this.currentRole.code, menusCodes)
      if (ret.data.code === 200) {
        this.$Message.success('保存成功!')
      }
    },
    /**
     * 获取当前选中菜单
     */
    getRoleMenus (roleCode) {
      RoleApi.roleMenuList(roleCode).then(res => {
        const list = res.data.data
        this.roleMenus = list
        this.resetCheckMenus(list, this.menuList)
      })
    },
    /**
     * 重置菜单的选中状态
     */
    resetCheckMenus (checkedList, menuList) {
      menuList.map(menu => {
        if (checkedList.length > 0 && this.currentRole.code !== '') {
          for (let i = 0; i < checkedList.length; i++) {
            const checkedCode = checkedList[i]
            if (menu.code === checkedCode) {
              if (menu.children instanceof Array && menu.children.length > 0) this.$set(menu, 'selected', true)
              else this.$set(menu, 'checked', true)
              delete checkedList[i]
              break
            } else {
              this.$set(menu, 'checked', false)
              this.$set(menu, 'selected', false)
            }
          }
        } else {
          this.$set(menu, 'checked', false)
          this.$set(menu, 'selected', false)
        }
        if (menu.children instanceof Array && menu.children.length > 0) {
          this.resetCheckMenus(checkedList, menu.children)
        }
        return menu
      })
    }
  },
  watch: {
    'currentRole.code': {
      handler: function (val, oldVal) {
        if (val) {
          this.roleName = this.currentRole.roleName
          this.getRoleMenus(this.currentRole.code)
        }
      }
    }
  },
  mounted () {
    MenuApi.list().then(res => {
      this.menuList = res.data.data
    })
  }
}
</script>
